<template>
  <div class="edit">
    <van-nav-bar
      title="修改个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="vnb"
    />
    <div class="d1">
      <van-uploader
        class="d1-v"
        :after-read="afterRead"
        :style="[flag ? obj : '']"
      />
      <img
        :src="list.avatar"
        v-show="list.avatar"
        class="d1-i"
        alt=""
        @click="changeimg"
      />
    </div>

    <van-form @submit="onSubmit">
      <van-field
        v-model="list.nickName"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
        @focus="showboard"
      />

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >保存</van-button
        >
      </div>
      <van-number-keyboard
        :show="show"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
    </van-form>
  </div>
</template>

<script>
import { getUserAPI } from "@/api/user";
import { editUserAPI } from "@/api/user";
import { Toast } from "vant";

export default {
  components: {},
  data() {
    return {
      show: false,
      list: {
        avatar: "",
        userName: "",
        nickName: "",
        password: "",
      },
      flag: true,
      obj: {
        display: "none",
      },
    };
  },
  computed: {},
  watch: {},

  methods: {
    changeimg() {
      this.flag = !this.flag;
      this.list.avatar = false;
    },
    async getuser() {
      const result = await getUserAPI();
      console.log(result);
      console.log(result.password);
      if (result.avatar == "") {
        result.avatar =
          "https://img0.baidu.com/it/u=3730772664,138405132&fm=26&fmt=auto";
      }
      this.list = result;
    },
    async onSubmit() {
      console.log(this.list.nickName);
      const result = await editUserAPI({
        nickName: this.list.nickName,
        avatar: this.list.avatar,
      });
      console.log(result);
      this.$router.go(-1);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    afterRead(file) {
      this.list.avatar = file.content;
      this.flag = true;
    },
    showboard() {
      this.show = true;
    },
    onInput(value) {
      this.list.nickName += value;
      Toast(value);
    },
    onDelete() {
      this.list.nickName = this.list.nickName.substring(
        0,
        this.list.nickName.length - 1
      );
    },
  },
  created() {
    this.getuser();
  },
  mounted() {},
};
</script>
<style lang="less" scoped >
.edit {
  .d1 {
    padding: 10px;
    text-align: center;

    img {
      width: 100px;
      height: 100px;
      border-radius: 50px;
    }
  }
}
.vnb {
  background-color: #dbdbdb;
}
</style>
